<template>
  <div class="record">
    <div class="drawMessage">
      <img src="../../assets/images/msg.png" class="image" />
      <span class="title">每周二0:00-12:00点击提现，17:00后可支付宝查看工资到帐。提示：逾期提现，工资自动延缓到下次打款。</span>
    </div>
    <div class="list"
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
    >
      <div v-for="item in recordList" key="index" index="index" item="item">
        <div class="recordList">
          <div>
            <div class="drawAmount">
              提现金额：
              <span class="amount">+{{item.amount}}</span>
              <span :class="['status', item.status === 1 ? 'suc' : 'progress']">{{item.statusText}}</span>
            </div>
          </div>
          <div>
            <span class="time">{{item.time}}</span>
          </div>
          <div class="remark" v-show="item.remark">
            <img src="../../assets/images/reason.png" class="image" />
            <span class="title">失败原因：{{item.remark}}</span>
          </div>
        </div>
      </div>
      <div class="no-more">
        {{ isHaveData ? '暂无提现记录' : isBottom? '到底啦~' : '正在加载...' }}
      </div>
    </div>
  </div>
</template>

<script>
  import { axiosGet, axiosPost } from '../../assets/js/api'
  import {
    mapGetters
  } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['mpOpenId', 'picUrl'])
    },
    data () {
      return {
        isHaveData: false,
        isBottom: false,
        isFetching: false,
        offset: 0,
        recordList: []
      }
    },
    mounted () {
      this.fetchList()
    },
    watch: {
      'mpOpenId': function () {
        this.fetchList()
      }
    },
    methods: {
      loadMore() {
        this.fetchList()
      },
      fetchList () {
        if (!this.mpOpenId) return;
        const self = this
        const data = JSON.stringify({
          "mpOpenId": this.mpOpenId,
          "offset": this.offset,
          "pageSize": 10
        })
        if (!this.isFetching) {
          axiosGet('/api/public/1.0/h5/weixin/withdrawList?data=' + encodeURI(data))
            .then((response) => {
              if (response.success) {
                const items = response.data
                self.recordList = [...this.recordList, ...items]
                self.offset += items.length
                if (!self.recordList.length) {
                  self.isHaveData = true
                  return
                }
                if (!items.length || items.length < 10) {
                  self.isBottom = true
                  self.isFetching = true
                  return
                }
              }
            }, (error) => {
            })
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .record {
    background-color: #f5f5f5;
    height: 100%;
    .no-more{
      color: #666;
      font-size: 0.3rem;
      text-align: center;
      padding: 0.2rem 0;
    }
    .drawMessage {
      background-color: #faf7e4;
      padding: 0.2rem 0.2rem 0.2rem 0.3rem;
      border-bottom: 0.5px solid #DADADA;
      .image {
        width: 0.4rem;
        height: 0.3rem;
        vertical-align: middle;
      }
      .title {
        padding-left: 0.2rem;
        font-size: 0.26rem;
        color: #f0955e;
        line-height: 0.4rem;
      }
    }
    .list {
      background-color: #fff;
    }
    .recordList {
      border-bottom: 1px solid #DADADA;
      padding: 0.3rem;
      .drawAmount {
        color: #666;
        font-size: 0.3rem;
        .amount {
          font-size: 0.4rem;
          color: #333;
          vertical-align: middle;
        }
        .status {
          float: right;
          font-size: 0.3rem;
        }
        .suc {
          color: #ff995b;
        }
        .progress {
          color: #70b2f5;
        }
      }
      .time {
        padding-top: 0.1rem;
        display: inline-block;
        color: #aaa;
        font-size: 0.24rem;
      }
      .remark {
        .image {
          width: 0.26rem;
          height: 0.26rem;
          vertical-align: middle;
        }
        .title {
          font-size: 0.24rem;
          color: #999;
          padding-left: 0.1rem;
          padding-top: 0.2rem;
          display: inline-block;
        }
      }
    }
  }
</style>
